<template>
    <div class="rain-container">
      <div
        v-for="index in rainDropCount"
        :key="index"
        class="rain-drop"
        :style="rainDropStyle(index)"
      ></div>
      <div
        v-for="index in rainDropCount"
        :key="'splash-' + index"
        class="rain-splash"
        :style="rainSplashStyle(index)"
      ></div>
    </div>
  </template>
  
  <script setup>
  import { defineProps, computed } from 'vue';
  
  // 定义 props
  const props = defineProps({
    rainDropCount: {
      type: Number,
      default: 50,
    },
    minDropHeight: {
      type: Number,
      default: 50,
    },
    maxDropHeight: {
      type: Number,
      default: 100,
    },
    minDropSpeed: {
      type: Number,
      default: 1,
    },
    maxDropSpeed: {
      type: Number,
      default: 3,
    },
    minDropWidth: {
      type: Number,
      default: 1,
    },
    maxDropWidth: {
      type: Number,
      default: 3,
    },
    splashSize: {
      type: Number,
      default: 10,
    },
    splashDuration: {
      type: Number,
      default: 0.5,
    },
  });
  
  // 计算雨滴样式
  const rainDropStyle = (index) => {
    return {
      '--left': `${Math.random() * 100}%`,
      '--height': `${Math.random() * (props.maxDropHeight - props.minDropHeight) + props.minDropHeight}px`,
      '--width': `${Math.random() * (props.maxDropWidth - props.minDropWidth) + props.minDropWidth}px`,
      '--speed': `${Math.random() * (props.maxDropSpeed - props.minDropSpeed) + props.minDropSpeed}s`,
      '--delay': `${Math.random() * 2}s`,
    };
  };
  
  // 计算水花样式
  const rainSplashStyle = (index) => {
    return {
      '--left': `${Math.random() * 100}%`,
      '--size': `${props.splashSize}px`,
      '--duration': `${props.splashDuration}s`,
      '--delay': `${Math.random() * 2}s`,
    };
  };
  </script>
  
  <style lang="scss" scoped>
  .rain-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
  }
  
  .rain-drop {
    position: absolute;
    top: -100px;
    left: var(--left);
    width: var(--width);
    height: var(--height);
    background: linear-gradient(to bottom, white, rgba(0, 0, 0, 0.2)); // 深色雨滴
    animation: fall var(--speed) linear infinite;
    animation-delay: var(--delay);
  }
  
  .rain-splash {
    position: absolute;
    bottom: 0;
    left: var(--left);
    width: var(--size);
    height: var(--size);
    background: rgba(0, 0, 0, 0.5); // 深色水花
    border-radius: 50%;
    opacity: 0;
    animation: splash var(--duration) ease-out infinite;
    animation-delay: var(--delay);
  }
  
  @keyframes fall {
    0% {
      transform: translateY(-100px);
    }
    100% {
      transform: translateY(100vh);
    }
  }
  
  @keyframes splash {
    0% {
      opacity: 1;
      transform: scale(0);
    }
    50% {
      opacity: 0.5;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(1.5);
    }
  }
  </style>